<script lang="ts" setup>
import { Card, Row, Col, Tag } from 'ant-design-vue';

// 房间状态枚举
enum RoomStatus {
  AVAILABLE = 'available', // 空闲 - 浅蓝色
  OCCUPIED = 'occupied', // 已住 - 灰色
  MAINTENANCE = 'maintenance', // 维修 - 红色
  ACTIVE = 'active', // 活跃 - 绿色
  LOCKED = 'locked', // 锁定 - 橙色
}

// 支付状态枚举
enum PaymentStatus {
  NORMAL = 'normal', // 正常
  OUTSTANDING = 'outstanding', // 欠费
  LEAVING_OUTSTANDING = 'leaving_outstanding', // 离欠
  GROUP_OUTSTANDING = 'group_outstanding', // 欠团
  LINKED_OUTSTANDING = 'linked_outstanding', // 欠联
}

// 房间状态配置
const roomStatusConfig = [
  {
    status: RoomStatus.AVAILABLE,
    label: '空闲',
    color: '#e6f7ff',
    borderColor: '#91d5ff',
    description: '房间可用，可以入住',
  },
  {
    status: RoomStatus.OCCUPIED,
    label: '已住',
    color: '#f5f5f5',
    borderColor: '#d9d9d9',
    description: '房间已被客人入住',
  },
  {
    status: RoomStatus.MAINTENANCE,
    label: '维修',
    color: '#fff2f0',
    borderColor: '#ff4d4f',
    description: '房间正在维修中',
  },
  {
    status: RoomStatus.ACTIVE,
    label: '活跃',
    color: '#f6ffed',
    borderColor: '#52c41a',
    description: '房间处于活跃状态',
  },
  {
    status: RoomStatus.LOCKED,
    label: '锁定',
    color: '#fff7e6',
    borderColor: '#fa8c16',
    description: '房间被锁定',
  },
];

// 支付状态配置
const paymentStatusConfig = [
  {
    status: PaymentStatus.NORMAL,
    label: '正常',
    color: 'transparent',
    description: '无欠费',
  },
  {
    status: PaymentStatus.OUTSTANDING,
    label: '欠费',
    color: '#ff4d4f',
    description: '有未结清费用',
  },
  {
    status: PaymentStatus.LEAVING_OUTSTANDING,
    label: '离欠',
    color: '#ff4d4f',
    description: '离店时欠费',
  },
  {
    status: PaymentStatus.GROUP_OUTSTANDING,
    label: '欠团',
    color: '#ff4d4f',
    description: '团队欠费',
  },
  {
    status: PaymentStatus.LINKED_OUTSTANDING,
    label: '欠联',
    color: '#ff4d4f',
    description: '关联账户欠费',
  },
];
</script>

<template>
  <Card title="房间状态图例" class="room-legend">
    <div class="legend-section">
      <h4>房间状态</h4>
      <Row :gutter="[16, 16]">
        <Col
          v-for="item in roomStatusConfig"
          :key="item.status"
          :xs="24"
          :sm="12"
          :md="8"
        >
          <div class="legend-item">
            <div
              class="status-sample"
              :style="{
                backgroundColor: item.color,
                borderColor: item.borderColor,
              }"
            >
              <span class="sample-text">示例</span>
            </div>
            <div class="legend-info">
              <span class="legend-label">{{ item.label }}</span>
              <span class="legend-description">{{ item.description }}</span>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="legend-section">
      <h4>支付状态</h4>
      <Row :gutter="[16, 16]">
        <Col
          v-for="item in paymentStatusConfig"
          :key="item.status"
          :xs="24"
          :sm="12"
          :md="8"
        >
          <div class="legend-item">
            <Tag :color="item.color" class="payment-sample">
              {{ item.label }}
            </Tag>
            <div class="legend-info">
              <span class="legend-description">{{ item.description }}</span>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="legend-section">
      <h4>图标说明</h4>
      <Row :gutter="[16, 16]">
        <Col :xs="24" :sm="12" :md="8">
          <div class="legend-item">
            <div class="icon-sample">
              <span class="icon-text">散</span>
            </div>
            <span class="legend-description">散客入住</span>
          </div>
        </Col>
        <Col :xs="24" :sm="12" :md="8">
          <div class="legend-item">
            <div class="icon-sample">
              <span class="icon-text">会</span>
            </div>
            <span class="legend-description">会议室</span>
          </div>
        </Col>
        <Col :xs="24" :sm="12" :md="8">
          <div class="legend-item">
            <div class="icon-sample">
              <span class="icon-text">订</span>
            </div>
            <span class="legend-description">已预订</span>
          </div>
        </Col>
        <Col :xs="24" :sm="12" :md="8">
          <div class="legend-item">
            <div class="icon-sample">
              <span class="icon-text">团</span>
            </div>
            <span class="legend-description">团队入住</span>
          </div>
        </Col>
        <Col :xs="24" :sm="12" :md="8">
          <div class="legend-item">
            <div class="icon-sample">
              <span class="icon-text">联</span>
            </div>
            <span class="legend-description">关联账户</span>
          </div>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<style scoped>
/* 响应式设计 */
@media (max-width: 768px) {
  .legend-item {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .status-sample {
    width: 50px;
    height: 30px;
  }

  .icon-sample {
    width: 20px;
    height: 20px;
  }
}

.room-legend {
  margin-bottom: 16px;
}

.legend-section {
  margin-bottom: 24px;
}

.legend-section h4 {
  margin-bottom: 16px;
  font-weight: 500;
  color: #262626;
}

.legend-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  background-color: #fafafa;
  border-radius: 6px;
}

.status-sample {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border: 2px solid;
  border-radius: 4px;
}

.sample-text {
  font-size: 12px;
  font-weight: 500;
  color: #262626;
}

.legend-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-label {
  font-weight: 500;
  color: #262626;
}

.legend-description {
  font-size: 12px;
  color: #8c8c8c;
}

.payment-sample {
  flex-shrink: 0;
}

.icon-sample {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: white;
  background-color: #1890ff;
  border-radius: 4px;
}

.icon-text {
  font-size: 12px;
  font-weight: 500;
}
</style>
